<template>
    <div class="M-popup" v-show="show">
        <div
            class="mask"
            :class="{ s: realConf.maskVisible }"
            @click="maskHandler"
        ></div>
        <div class="content">
            <div class="title" v-if="realConf.showTitle">
                <span>{{ realConf.title }}</span>
                <i class="close" @click="close">+</i>
            </div>
            <div class="body">
                <slot name="body"></slot>
            </div>
            <div
                class="footer"
                v-if="realConf.showFooter"
                @click.stop="clickHandler"
            >
                <slot name="foot" v-if="!btns || !btns.length"></slot>
                <div class="ctrls" v-if="btns && btns.length">
                    <button
                        v-show="btn.show"
                        v-for="btn in btns"
                        :key="btn.type"
                        :data-type="btn.type"
                        @click="btnHandler(btn)"
                    >
                        {{ btn.text }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { hasOwn, isFunction } from "@/util";
let def_conf = {
    maskVisible: true, //掩膜层是否可见
    maskClickble: true, //掩膜层是否可点
    showTitle: true,
    showFooter: true,
    title: "",
};
let def_btns = [
    {
        text: "取消",
        type: "cancel",
        show: true,
    },
    {
        text: "确定",
        type: "ok",
        show: true,
    },
];
export default {
    props: {
        config: {
            type: Object,
            default: function () {
                return {
                    maskVisible: true, //掩膜层是否可见
                    maskClickble: true, //掩膜层是否可点
                    showTitle: true,
                    showFooter: true,
                    title: "",
                    btns: [
                        {
                            text: "取消",
                            type: "cancel",
                            show: true,
                        },
                        {
                            text: "确定",
                            type: "ok",
                            show: true,
                        },
                    ],
                };
            },
        },
        show: {
            //是否展示，通过 .sync 绑定
            type: Boolean,
            default: true
        }
    },
    data: function () {
        return {
            realConf: {},
            btns: []
        };
    },
    mounted() {
        this.handleConf(this.config);
    },
    methods: {
        maskHandler(e) {
            if (this.config.maskClickble) this.close();
        },
        close() {
            if (this.show) {
                this.$emit("update:show", !this.show);
            }
        },
        clickHandler(e) {
            // 事件委托
            console.log(e);
        },
        handleConf(newConf) {
            // 配置合并
            newConf &&
                Object.keys(def_conf).forEach((key) => {
                    this.realConf[key] = hasOwn(newConf, key)
                        ? newConf[key]
                        : def_conf[key];
                });
            //默认 btns 处理
            if (!newConf.btns || !newConf.btns.length) {
                this.btns = def_btns;
            }
        },
        btnHandler(btn){
            let res;
            if(isFunction(btn.action)){
                // 返回 false，或者无返回值 正常关闭，返回 true 则不关闭
                res = btn.action(btn);
            }  
            if(!res) this.close();
        }
    },
    watch: {
        config: function (nval, oVal) {
            if (nval && nval !== oVal) {
                this.handleConf(nval);
            }
        },
        "config.btns": function (nval, oval) {
            if (nval !== oval) {
                this.btns = nval;
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import "@/components/common/var.less";
.M-popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 12;
    .mask {
        width: 100%;
        height: 100%;
        &.s {
            background: rgba(0, 0, 0, 0.5);
        }
    }
    .content {
        position: absolute;
        width: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 10px;
        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28px;
            padding: 20px;
            line-height: @btnH;
            border-bottom: 1px solid @borderColor;
            .close{
                width: @btnH/2;
                height: @btnH/2;
                line-height: @btnH/2;
                border-radius: 50%;
                font-size: 40px;
                text-align: center;
                color: @btnColor;
                font-weight: bold;
                transform: rotateZ(35deg);
            }
        }
        .body {
            padding: 20px;
            line-height: @btnH;
        }
        .footer {
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid @borderColor;
            .ctrls {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px 0;
                button {
                    .btn();
                    margin: 0 20px;
                    &[data-type="cancel"] {
                        background: #fff;
                        border: 1px solid @btnColor;
                        color: @btnColor;
                    }
                    &[data-type="ok"] {
                        background: @btnColor;
                        border: 1px solid @borderColor;
                    }
                }
            }
        }
    }
}
</style>